<template>
  <div class="wrapper">
    <todo-input></todo-input>
    <todo-list :todoList="todoList"></todo-list>
  </div>
</template>

<script lang="ts">
//defineComponent -> ts自动提示组件函数
import { computed, defineComponent, onMounted } from "vue";
//导入自定义hooks
import { useTodo, IUseTodo } from "@/hooks/index";
import { useStore, Store } from "vuex";

import TodoInput from "./components/TodoInput/index.vue";
import TodoList from "./components/TodoList/index.vue";

export default defineComponent({
  name: "App",
  components: {
    TodoInput,
    TodoList,
  },
  setup() {
    const { setTodoList }: IUseTodo = useTodo();
    const store: Store<any> = useStore();

    //页面挂载组件时：
    onMounted(() => {
      //1.加载store里保存的list数组列表
      setTodoList();
    });

    return {
      //该数据是动态的渲染模板使用：所有转响应式数据
      todoList: computed(() => store.state.list),
    };
  },
});
</script>
